<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title>开关灯效果</title>
    <script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
    <style>
        body {
            display: flex;
            justify-content: center;
            align-items: center;
            min-height: 100vh;
            margin: 0;
        }

        #app {
            display: flex;
            flex-direction: column;
            align-items: center;
        }

        button {
            margin-bottom: 10px;
        }
    </style>
</head>

<body>
    <div id="app">
        <button @click="toggleLight">{{ isLightOn ? '关灯' : '开灯' }}</button>
        <img :width="width" :src="isLightOn ? 'img/on.jpg' : 'img/off.jpg'" alt="">
    </div>

    <script>
        const app = Vue.createApp({
            data() {
                return {
                    width: 200,
                    isLightOn: true
                };
            },
            methods: {
                toggleLight() {
                    this.isLightOn = !this.isLightOn;
                }
            }
        });
        app.mount('#app');
    </script>
</body>

</html>